<!DOCTYPE HTML>
<html>

<head>
   <title> 详情页</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <link href="../../../assets/css/dpl-min.css" rel="stylesheet" type="text/css" />
   <link href="../../../assets/css/bui-min.css" rel="stylesheet" type="text/css" />
   <link href="../../../assets/css/page-min.css" rel="stylesheet" type="text/css" />
   <link href="../../../assets/css/jx-style.css" rel="stylesheet" type="text/css" />
   <link href="../../../assets/css/prettify.css" rel="stylesheet" type="text/css" />
   <link href="../../../assets/css/my-style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="container">
    <div class="detail-page span24">
        <div class="detail-page-title">
            <h4>订单详情
                <button type="button" id="user-list-btn" class="pull-right jx-btn ">返回</button>
            </h4>

        </div>
        <div class="detail-section">
            <div class="row detail-row">
                <div class="span24">
                  <div class="btn-title clearfix">
                      <button type="button"class="pull-left send-btn btn-info" style="margin:0;margin-right:30px;">发货</button>
                      <button type="button"class="pull-left change-btn btn-info" style="margin:0;margin-right:30px;">修改价格</button>
                      <button type="button"class="pull-left refuse-btn btn-info" style="margin:0;">关闭订单</button>
                  </div>
                    <table id="" class="table table-header table-condensed table-bordered">
                        <thead>
                        <td colspan="4">订单基础信息</td>
                        </thead>
                        <tr  colspan="4">
                            <td width="150">
                                <label class="pull-right">订单编号</label>
                            </td>
                            <td colspan="3">
                                6080240000608
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <label class="pull-right">订单状态</label>
                            </td>
                            <td colspan="3" style="color:red;">
                                商品已拍下，等待买家付款
                            </td>
                        </tr>
                        <tr >
                            <td width="150">
                                <label class="pull-right">下单时间</label>
                            </td>
                            <td>
                              2018-03-14 12:12:11
                            </td>
                            <td width="150">
                                <label class="pull-right">支付时间</label>
                            </td>
                            <td>
                              2018-03-14 12:12:11
                            </td>
                        </tr>
                        <tr>
                            <td width="150">
                                <label class="pull-right">发货时间</label>
                            </td>
                            <td>
                            </td>
                            <td width="150">
                                <label class="pull-right">完成时间</label>
                            </td>
                            <td>
                            </td>
                        </tr>
                        <tr>
                            <td width="150">
                                <label class="pull-right">撤消时间</label>
                            </td>
                            <td colspan="3">
                            </td>
                        </tr>
                    </table>
                    <table id="" class="table table-header table-condensed table-bordered">
                        <thead>
                        <td colspan="4">
                            订单归属信息
                        </td>
                        </thead>
                        <tr  colspan="4">
                            <td width="150">
                                <label class="pull-right">商户</label>
                            </td>
                            <td colspan="3">
                                激想体育特卖号
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <label class="pull-right">下单用户昵称</label>
                            </td>
                            <td colspan="3">
                                 🌞🌞🌞晨🌞🌞🌞🌞
                            </td>
                        </tr>
                        <tr >
                            <td width="150">
                                <label class="pull-right">下单用户账号</label>
                            </td>
                            <td>
                              wx_37236434784
                            </td>
                            <td width="150">
                                <label class="pull-right">下单用户手机</label>
                            </td>
                            <td>
                              18916043882
                            </td>
                        </tr>
                        <tr>
                            <td width="150">
                                <label class="pull-right">关联分销员账号</label>
                            </td>
                            <td>
                              wx_37236434784
                            </td>
                            <td width="150">
                                <label class="pull-right">关联分销员手机</label>
                            </td>
                            <td>
                              15900684377
                            </td>
                        </tr>
                    </table>
                    <table id="" class="table table-header table-condensed table-bordered">
                        <thead>
                        <td colspan="4">
                            订单配送信息
                        </td>
                        </thead>
                        <tr  colspan="4">
                            <td width="150">
                                <label class="pull-right">配送方式</label>
                            </td>
                            <td colspan="3">
                            </td>
                        </tr>
                        <tr  colspan="4">
                            <td width="150">
                                <label class="pull-right">配送信息</label>
                            </td>
                            <td colspan="3">
                                上海市 上海市 浦东新区 锦绣东路2777号34号楼7楼前台, 王兴, 13817093694
                                <button type="button" class="ml-10 pull-right button">编辑</button>
                                <button type="button" class="ml-10 pull-right button">复制</button>
                            </td>
                        </tr>
                        <tr  colspan="4">
                            <td width="150">
                                <label class="pull-right">买家留言</label>
                            </td>
                            <td colspan="3">
                            </td>
                        </tr>
                    </table>
                    <!-- 表格 start-->
                    <div>
                        <div class="grid-header">订单商品信息</div>
                        <div id="grid"></div>
                    </div>
                    <!-- 表格 end-->
                    <table id="" class="table table-header table-condensed table-bordered">
                        <thead>
                        <td colspan="4">
                            订单支付信息
                        </td>
                        </thead>
                        <tr  colspan="4">
                            <td width="150">
                                <label class="pull-right">付款方式</label>
                            </td>
                            <td colspan="3">微信支付
                            </td>
                        </tr>
                        <tr  colspan="4">
                            <td width="150">
                                <label class="pull-right">订单支付号</label>
                            </td>
                            <td colspan="3">37246346781461454615
                            </td>
                        </tr>
                    </table>
                    <div class="all-price">
                       订单共<span style="color:red">3</span>件商品，销售总计：<span style="color:red">¥842.00</span>（含运费 ¥5.00）    返佣总计：<span style="color:red">¥95.00</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 初始隐藏 expressDialog内容 -->
        <div id="express" class="hide">
            <form class="form-horizontal">
                <div id="expressform" class="row">
                        <div id="dialoggrid"></div>
                </div>
                <p>发货地址：上海市 浦东新区 锦绣东路2777弄34号 7楼  AIillian_wang 15921172492</p>
                <div>
                    <span>物流公司：</span>
                     <select id="express" name="express">
                        <option value="0">顺丰</option>
                        <option value="1">圆通</option>
                    </select>
                </div>
                <div style="margin-top:15px;">
                    <span>物流单号：</span>
                    <input type="text" class=" control-text">
                </div>
            </form>
        </div>
<script type="text/javascript" src="../../../assets/js/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="../../../assets/js/bootstrap.js"></script>
<script type="text/javascript" src="../../../assets/js/bui-min.js"></script>
<script type="text/javascript" src="../../../assets/js/config-min.js"></script>
<script type="text/javascript">
    BUI.use('common/page');
</script>
<script type="text/javascript">
    BUI.use(['bui/grid', 'bui/data', 'common/search', 'bui/overlay', 'bui/form'], function (Grid, Data, Search, Overlay, Form) {
        var Grid = Grid,                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            
            Store = Data.Store,
            columns = [{
                title: '商品',
                dataIndex: 'a',
                elCls: 'td-pro', //居中
                width: 300,
                renderer: function (value, obj) {
                        return '<div class="td-inner">' +
                        '  <img class="pro-img"   src="../../../assets/img/u9486.png" alt="">' +
                        '  <div class="pro-info  ml-10">' +
                        '      <p>New Balance/NB 247系列 男鞋复古鞋运动休闲鞋MRL247WK[商品交易快照]</p>' +
                        '      <p style="color:#AEAEAE;">商品编号：MRL247WK</p>' +
                        '      <p style="color:#AEAEAE;">规格：8.5</p>' +
                        '  </div>' +
                        '</div>'
                  }
            }, {
                title: '价格(元)',
                dataIndex: 'b',
                elCls: 'center', //居中
                width: 100
            }, {
                title: '返佣(元)',
                elCls: 'center',
                dataIndex: 'c',
                width: 100
            }, {
                title: '数量',
                elCls: 'center',
                dataIndex: 'd',
                width: 100
            }, {
                title: '小记(元)',
                elCls: 'center',
                dataIndex: 'e',
                width: 100
            }, {
                title: '返佣小计(元)',
                elCls: 'center',
                dataIndex: 'f',
                width: 100
            }, {
                title: '状态',
                elCls: 'center',
                dataIndex: 'g',
                width: 100
            }],
            data = [{
                id: 1,
                a: '',
                b: '459.00',
                c: '59.00',
                d: '1',
                e: '459.00',
                f: '59.00',
                g: '待付款'
            }];

        //初始化数据 
        var isAddRemote = false,
            editing = new Grid.Plugins.DialogEditing({
                contentId: 'content', //设置隐藏的Dialog内容
                triggerCls: 'change-btn', //触发显示Dialog的样式
                editor: {
                    title: '商品数量'
                }
            }),
            store = new Store({ //初始化数据
                data: data,
                autoLoad: true, //自动加载数据
                pageSize: 2 // 配置分页数目
            }),
            grid = new Grid.Grid({
                render: '#grid',
                elCls: 'small-bui-grid-table mb-20',
                columns: columns,
                loadMask: true, //加载数据时显示屏蔽层

                bbar: {
                    // pagingBar:表明包含分页栏
                    pagingBar: true
                },
                plugins: [editing], //插件
                store: store
            });

        grid.render();
        //修改价格表格
        var logStore = Data.Store,
            logcolumns = [{
                title: '<span style="display: inline-block;width:270px;text-align:center;">商品</span><span style="display: inline-block;width:150px;text-align:center;">单价</span><span style="display: inline-block;width:100px;text-align:center;">数量</span>',
                dataIndex: 'a',
                elCls: 'td-pro', //居中
                    width: 530,
                    renderer: function (value, obj) {
                        return '<div class="td-inner">' +
                        '  <img class="pro-img"   src="../../../assets/img/u9486.png" alt="">' +
                        '  <div class="pro-info  ml-10">' +
                        '      <p>New Balance/NB 247系列 男鞋复古鞋运动休闲鞋MRL247WK[商品交易快照]</p>' +
                        '      <p style="color:#AEAEAE;">商品编号：MRL247WK</p>' +
                        '      <p style="color:#AEAEAE;">规格：8.5</p>' +
                        '  </div>' +
                        '  <span style="line-height:60px;width:150px;text-align:center;">248.00</span>'+
                        '  <span style="line-height:60px;width:100px;text-align:center;">1</span>'+
                        '</div>'
                  }
            }, {
                title: '合计',
                elCls: 'center',
                dataIndex: 'b',
                width: 100
            }, {
                title: '优惠价格',
                elCls: 'center',
                dataIndex: 'c',
                width: 130,
                renderer: function (value, obj) {
                        return '<div>' +
                        '  <input type="text" id="discount-price">'+
                        '  <p><input type="radio">与其它优惠同享</p>'+
                        '</div>'
                  }
            }, {
                title: '运费',
                elCls: 'center',
                dataIndex: 'd',
                width: 120,
                renderer: function (value, obj) {
                        return '<div>' +
                        '  <input type="text" id="freight-price">'+
                        '</div>'
                  }
            }],
            logdata = [{
                a: '',
                b: '1398'
            }];

        var logstore = new logStore({
                data: logdata,
                autoLoad: true
            }),
            loggrid = new Grid.Grid({
                forceFit: true, // 列宽按百分比自适应
                elCls: 'small-bui-grid-table mb-20',
                columns: logcolumns,
                store: logstore
            });

        //修改价格
        var LogDialog = new Overlay.Dialog({
            title: '修改价格',
            width: 950,
            // height: 400,
            //配置DOM容器的编号
            children: [loggrid],
            childContainer: '.bui-stdmod-body',
            success: function () {
                //点击成功时候操作

                //  this.close();
            }
        });
        $('.change-btn').on('click', function () {
            LogDialog.show();
        });
        $("#user-list-btn").click(function () {
            top.topManager.closePage();
        });
        //发货表格
            var dialogStore = Data.Store,
                dialogcolumns = [{
                    title: '商品',
                    dataIndex: 'a',
                    elCls: 'td-pro', //居中
                        width: 300,
                        renderer: function (value, obj) {
                            return '<div class="td-inner">' +
                            '  <img class="pro-img"   src="../../../assets/img/u9486.png" alt="">' +
                            '  <div class="pro-info  ml-10">' +
                            '      <p>New Balance/NB 247系列 男鞋复古鞋运动休闲鞋MRL247WK[商品交易快照]</p>' +
                            '      <p style="color:#AEAEAE;">商品编号：MRL247WK</p>' +
                            '      <p style="color:#AEAEAE;">规格：8.5</p>' +
                            '  </div>' +
                            '</div>'
                    }
                }, {
                    title: '数量',
                    elCls: 'center',
                    dataIndex: 'b',
                    width: 100
                }, {
                    title: '物流|单号',
                    elCls: 'center',
                    dataIndex: 'c',
                    width: 150,
                    renderer: function (value, obj) {
                        return '<div>' +
                        '  <p>顺丰速递</p>'+
                        '  <p>23583285</p>'+
                        '</div>'
                  }
                }, {
                    title: '状态',
                    elCls: 'center',
                    dataIndex: 'd',
                    width: 100
                }],
                dialogdata = [{
                    a: '',
                    b: '1',
                    c: '',
                    d: '已发货'
                },{
                    a: '',
                    b: '2',
                    c: '',
                    d: '未发货'
                }];

            var dialogstore = new dialogStore({
                    data: dialogdata,
                    autoLoad: true
                }),
                dialoggrid = new Grid.Grid({
                    render: '#dialoggrid',
                    forceFit: true, // 列宽按百分比自适应
                    elCls: 'small-bui-grid-table mb-20',
                    columns: dialogcolumns,
                    plugins: [Grid.Plugins.CheckSelection], //插件
                    store: dialogstore
                });
               dialoggrid.render(); 
            //发货
            var salesLogDialog = new Overlay.Dialog({
                title: '商品发货',
                width: 800,
                // height: 400,
                //配置DOM容器的编号
                contentId: 'express',
                success: function () {
                    //点击成功时候操作

                    //  this.close();
                }
            });
            $('.send-btn').on('click', function () {
                salesLogDialog.show();
            });
    });
</script>
   <body>

</html>